<template>
  <div class="tagCheckboxListWrapper">
    <!-- <a-col :md="4" :sm="24" :pull="20">
      筛选条件
      <a-switch @change="toggleAdvanced" />
    </a-col> -->
    <!-- <slot name="switch" /> -->
    <slot name="button" />
    <div v-if="advanced">
      <div v-for="(item,index) in userData" :key="index">
        <a-col :md="24" :sm="24">
          <a-form-item :label="item.label">
            <!-- <a-checkable-tag :checked="!(form.getFieldValue(item.field)&&form.getFieldValue(item.field).length) || item.active" @change="handleChange(item)">不限</a-checkable-tag> -->
            <TagCheckbox
              ref="TagCheckbox"
              :options="item.option"
              :form-options="{initialValue: []}"
              :form="form"
              :form-item-id="item.field"
            />
          </a-form-item>
        </a-col>
      </div>
      <a-col :md="24" :sm="24">
        <span>
          <a-button type="primary">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset">重置</a-button>
        </span>
      </a-col>
    </div>
  </div>
</template>
<script>
import { TagCheckbox } from '@/components'
export default {
  name: 'TagCheckboxList',
  components: { TagCheckbox },
  props: {
    data: {
      type: Array,
      default: function() {
        return []
      },
      required: false
    },
    form: {
      type: Object,
      default: function() {
        return {}
      },
      required: false
    }
    // advanced: {
    //   type: Boolean,
    //   default: false,
    //   required: false
    // }
  },
  data() {
    return {
      isChecked: [],
      userData: this.data,
      advanced: false
    //   formData: this.form.getFieldsValue()
    }
  },
  computed: {
    formData() {
      return this.form.getFieldsValue()
    }
  },
  methods: {
    handleChange(item) {
      console.log(item)
      this.userData = this.userData.map(res => {
        const result = res
        if (item.field === result.field) {
          result.active = true
          result.option.map(optionRes => (optionRes.active = false))
        }
        return result
      })
      this.form.setFieldsValue({ [item.field]: [] })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
      console.log(this.advanced)
    },
    reset() {
      this.userData = this.userData.map(res => {
        const result = res
        result.active = true
        result.option.map(optionRes => (optionRes.active = false))
        return result
      })
      this.$refs.TagCheckbox.forEach((item) => {
        item.isChecked = []
      })
      this.form.setFieldsValue({ label1: [], label5: [], label11: [], label14: [] })
    }
  }
}
</script>
